<template>
  <div class="card-filter">
    <div class="content">
      <div class="header">
        <img src="/src/assets/icons/menu-screen.png">
        <span>筛选</span>
      </div>
      <div class="title">持卡人</div>
      <div class="oblong">
        <div class="s-item" 
          v-for="(v, k) in ownerList" :key="k" 
          @click="ownerChoose(v.id)"
          :class="{active: owner === v.id}"
        >
          <span class="text">{{v.owner}}</span>
        </div>
        <div class="s-item white" v-if="ownerList.length % 3 === 2">
          <span class="text"></span>
        </div>
      </div>
      <div class="title">
        银行
        <mt-button type="default" size="small" :plain="true" class="plain-btn" @click="checkAllBanks">全选</mt-button>
      </div>
      <div class="oblong">
        <div class="s-item" 
          v-for="v in bankList" :key="v.bank_id" 
          :class="{active: inArray(bankActive, v.bank_id) !== false}" 
          @click="bankSelect(v.bank_id)">
          <span class="text">{{v.bank_name}}</span>
        </div>
        <div class="s-item white" v-if="bankList.length % 3 === 2">
          <span class="text"></span>
        </div>
      </div>
    </div>
    <div class="btn-group">
      <!-- <mt-button type="default" :plain="true" class="cancel" @click="closePopup">取消</mt-button> -->
      <mt-button type="primary" class="confirm" @click="confirm">确定</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BankFilter',
  data () {
    return {
      isActive: 0,
      bankActive: [],
      bankList: [],
      ownerList: [],
      owner: -1
    }
  },
  methods: {
    closePopup () {
      this.$emit('close', false)
    },
    confirm () {
      this.$emit('close', false)
    },
    getPopupData () {
      this.$post('/vue/card/search_item', '').then(data => {
        this.ownerList = data.owners
        this.bankList = data.banks
      })
    },
    bankSelect (val) {
      let index = this.inArray(this.bankActive, val)
      if (index !== false) {
        this.bankActive.splice(index, 1)
      } else {
        this.bankActive.push(val)
      }
      this.$emit('chooseBank', this.bankActive)
    },
    checkAllBanks () {
      for (let i = 0; i < this.bankList.length; i++) {
        let id = this.bankList[i].bank_id
        if (this.inArray(this.bankActive, id) === false) {
          this.bankActive.push(id)
        }
      }
      this.$emit('chooseBank', this.bankActive)
    },
    ownerChoose (id) {
      if (this.owner === id) {
        this.owner = -1
      } else {
        this.owner = id
      }
      this.$emit('chooseOwner', this.owner)
    },
    inArray (arr, val) {
      for (let i = 0; i < arr.length; i++) {
        if (val === arr[i]) {
          return i
        }
      }
      return false
    }
  }
}
</script>
<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .card-filter {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .content {
      padding: 12px;
      margin-bottom: 58px;
      .header {
        color: #7c7c7c;
        text-align: left;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
        }
        span {
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .title {
        color: #7c7c7c;
        margin: 24px 0 8px 0;
        font-size: 15px;
        line-height: 24px;
        font-weight: bold;
        text-align: left;
      }
      .plain-btn {
        float: right;
        width: auto;
        height: 24px;
        border-color: #e2e2e2;
        font-size: 12px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 16px;
        color: #a9a9a9;
        position: relative;
        box-sizing: border-box;
        .mint-button-text {
          display: block;
          line-height: 0;
          span {
            margin-right: 12px;
          }
          .right-img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 22px;
            height: 22px;
            margin: 0;
            padding: 0;
          }
        }
      }
      .oblong {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: 0;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        .s-item {
          display: inline-block;
          height: 24px;
          background-color: #f0f4f7;
          border-radius: 4px;
          -webkit-box-flex: 0;
          flex: 0 0 88px;
          -ms-flex: 0 0 88px;
          margin-bottom: 12px;
          &.white {
            background-color: #FFF;
          }
          &.transparent {
            background-color: transparent;
            img {
              width: 24px;
              height: 24px;
              vertical-align: middle;
            }
            .text {
              font-size: 12px;
              font-weight: normal;
              color: @c-169;
              vertical-align: middle;
            }
          }
          .text {
            color: #7c7c7c;
            font-size: 13px;
            line-height: 24px;
            font-weight: normal;
          }
          &.active {
            background-color: rgba(108, 184, 222, 0.3);
            .text {
              color: #286496;
            }
          }
        }
      }
    }
    .btn-group {
      width: 92%;
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 2.7% 4%;
      background-color: #FFF;
      border-top: 1px solid rgb(226, 226, 226);
      display: flex;
      justify-content: space-between;
      .cancel {
        flex: 1;
        font-size: 13px;
        font-weight: bold;
        border-radius: 8px;
        border-color: rgb(226, 226, 226);
        color: rgb(124, 124, 124);
      }
      .confirm {
        flex: 2;
        font-size: 13px;
        border-radius: 8px;
        margin: 0 24px;
        background-color: rgb(108, 184, 222);
      }
    }
  }
</style>